<template>
  <div>
    <ul>
      <!-- 遍历有几个li  -->
      <li v-for="item in result" :key="item.id">
        <div class="picBox">
          <a href="#" :title="item.name">
            <img :src="item.picUrl" alt="" />
            <div class="bottom">
              <!-- 图片下耳机的图片 -->
              <span class="icon-headset"></span>
              <span class="nb">{{ item.playCount | numFilter }}</span>
              <!-- 图片下的播放按钮 -->
              <a href="#"> </a>
            </div>
          </a>
        </div>
        <p class="dec">
          <a href="#">{{ item.name }}</a>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取的参数id,名字，copywriter,picUrl
      result: []
    }
  },
  created() {
    this.getPersonalized()
  },
  methods: {
    async getPersonalized() {
      const { data: res } = await this.$http.get('/personalized?limit=8')
      this.result = res.result
      console.log(this.result)
    }
  }
}
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
ul li {
  width: 140px;
  height: 204px;
  margin: 15px 0;
}
.picBox {
  position: relative;
}
.picBox img {
  width: 100%;
  height: 100%;
}
.bottom {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 27px;
  color: #ccc;
  background: url(https://s2.music.126.net/style/web2/img/coverall.png?5d128bd48f5bc3d2e6c8ed12823bd57c) no-repeat 0 -537px;
}
.icon-headset {
  float: left;
  /* display: inline-block; */
  width: 14px;
  height: 11px;
  margin: 9px 5px 9px 10px;
  background: url(https://s2.music.126.net/style/web2/img/iconall.png?38f6502aa694201b6b29360e06f038d8) no-repeat 0 -24px;
}
.nb {
  float: left;
  line-height: 27px;
}
/* 图片下面的播放标签 */
.bottom a {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 17px;
  background: url(https://s2.music.126.net/style/web2/img/iconall.png?38f6502aa694201b6b29360e06f038d8) no-repeat 0 0;
}
.dec {
  margin: 8px 0 3px;
  font-size: 14px;
}
</style>
